<!--
 * @Author: 冯向博
 * @Date: 2021-10-19 16:40:29
 * @LastEditTime: 2021-10-22 11:06:11
-->
<template>
	<view class="wrap">
		<u-swiper :list="slides" name="img_url" height="320px"></u-swiper>
		<view class="u-text-center u-m-t-20">
			<u-tabs
				:list="sortList"
				:is-scroll="false"
				:current="current"
				@change="changeSort"
			></u-tabs>
		</view>
		<u-row gutter="16" class="u-skeleton">
			<u-col
				span="6"
				v-for="goods in goodsList.length !== 0
					? goodsList
					: [{}, {}, {}, {}]"
			>
				<goods-card :goods="goods"></goods-card>
			</u-col>
		</u-row>
		<u-skeleton
			:loading="loading"
			:animation="true"
			bgColor="#FFF"
		></u-skeleton>
	</view>
</template>

<script>
import goodsCard from "../../components/goods-card/goods-card.vue";
export default {
	components: { goodsCard },
	data() {
		return {
			page: 1,
			slides: [],
			goodsList: [],
			sortList: [
				{
					name: "默认",
				},
				{
					name: "销量",
				},
				{
					name: "推荐",
					cate_count: 5,
				},
				{
					name: "最新",
				},
			],
			current: 0,
			loading: false,
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		changeSort(index) {
			this.current = index;
			console.log(index);
			this.goodsList = [];
			this.page = 1;
			this.getData();
		},

		async getData() {
			this.loading = true;
			const params = {
				page: this.page,
			};
			if (this.current == 1) params.sales = 1;
			if (this.current == 2) params.recommend = 1;
			if (this.current == 3) params.new = 1;
			const res = await this.$u.api.index(params);

			this.loading = false;

			this.slides = res.slides;
			this.goodsList = [...this.goodsList, ...res.goods.data];
		},
	},
	onReachBottom() {
		this.page = this.page + 1;
		this.getData();
	},
};
</script>

<style lang="scss"></style>
